<template>
     <div class="zenjiadp">
          <h2 class="cj">创建新的店铺</h2>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
          <el-form-item label="店铺ID" prop="id">
              <el-input v-model="ruleForm.id" style="width:400px" @blur="bid"></el-input>
              <span class="erro erro1" v-if="errbl">{{erro1}}</span>
              <span class="erro erro1 blu" v-else>{{erro1}}</span>

            </el-form-item>
            <el-form-item label="店铺名称" prop="name">
              <el-input v-model="ruleForm.name" style="width:400px"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="region">
              <el-select v-model="ruleForm.region" placeholder="请选择商铺类型" @change="asd">
                <el-option label="品牌直销" value="品牌直销"></el-option>
                <el-option label="个人专营" value="个人专营"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="创建导航" prop="type">
              <el-tag
                :key="tag"
                v-for="tag in dynamicTags"
                closable
                :disable-transitions="false"
                @close="handleClose1(tag)"
              >{{tag}}</el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              ></el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
            </el-form-item>
            <div class="shangchuantupian">
              <h2 class="cjh">请上传一些商铺介绍图:</h2>
             <el-upload
                class="upload-demo"
                ref="upload"
                action="/api/sc"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
                 list-type="picture"
                :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </div>
            <el-form-item label="店铺信息" prop="desc" class="dianpuxx">
              <el-input type="textarea" v-model="ruleForm.desc" class="shurukuang"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
</template>
<style>
  .erro{
    font-size: 14px;
    color: red;
  }
  .blu{
    color: cornflowerblue;
  }
</style>

<script>
export default {
    data(){
        return{
            erro1:"",
            errbl:false,
            dynamicTags: [],
            inputVisible: false,
            inputValue: "",
            img:[],
             ruleForm: {
               id:"",
                name: "",
                region: "",
                desc: ""
            },
            rules: {
                id:[
                    { required: true, message: "请输入店铺ID", trigger: "blur" },
                    { min: 5, max: 10, message: "长度在 5 到 10 个字符", trigger: "blur" }
                ],
                name: [
                { required: true, message: "请输入店铺名称", trigger: "blur" },
                { min: 3, max: 12, message: "长度在 3 到 12 个字符", trigger: "blur" }
                ],
                region: [
                { required: true, message: "添加你需要的商铺导航", trigger: "change" }
                ],
                type: [
                { required: true, message: "添加你需要的商铺导航", trigger: "change" }
                ],
                desc: [
                { required: true, message: "向大家介绍你的店铺吧", trigger: "blur" }
                ]
            }
        }
    },
    methods:{
      asd(){
        console.log(this.ruleForm.region)
      },
        submitForm(formName) {
          var _this=this
           if(this.img.length==0 || this.dynamicTags.length==0){
              console.log('请完善数据!')
              this.$toast({
                message:"请完善数据",
                duration:1500
              })
              return false
            }
          var ab = function (params) {
              let flag = true;
              for(var key in params){
                if(params[key] != '0' && !params[key]){
                  console.log('请完善数据!');
                  _this.$toast({
                message:"请完善数据",
                duration:1500
              })
                  return false; // 终止程序
                }
              }
            
              return flag;
            }
            ab(this.ruleForm)
            if(this.ruleForm.id.length>=5 && this.ruleForm.id.length<=10){
              
            }else{
              this.$toast({
                message:"商铺ID必须5-10个字符",
                duration:1500
              })
              return false
            }
            if(this.ruleForm.name.length>=3 && this.ruleForm.name.length<=12){

            }else{
              console.log(this.ruleForm.name)
              this.$toast({
                message:"商铺名称必须3-12个字符",
                duration:1500
              })
              return false
            }
          axios.post("/api/dptj",{tag:this.dynamicTags,rul:this.ruleForm,img:this.img}).then((data)=>{
            console.log(data.data)
            if(data.data.num){
              this.$toast({
                message:"添加成功",
                duration:1500
              })
              this.$router.push('/houtai')
            }else{
              this.$toast({
                message:"创建失败，请重新创建",
                duration:1500
              })
              return false
            }
          })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    handleClose1(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
     submitUpload(e) {
       console.log(e)
        this.$refs.upload.submit();
        
      },
      handleSuccess(response,file,fileList){
        console.log(response)
        this.img.push(response)
        console.log(this.img)
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      bid(){
        var dpid=this.ruleForm.id
        // if(dpid.match(/[^0-9]*/)){
        //   this.erro1="请输入纯数字"
        //   return false
        // }
        console.log(dpid)
        if(dpid.length>=5 && dpid.length<=8){
          axios.post("/api/dpid",{dpid:this.ruleForm.id,uname:"123"}).then((data)=>{
            console.log(typeof data.data.num)
            if(data.data.num){
              this.errbl=false
              this.erro1="可用"
            }else{
              this.errbl=true
              this.erro1="id已被注册"
            }
          })  
        }else{
          this.erro1=""
        }
      }
    }
}
</script>

